import { useEffect, useState } from "react";
import { DndProvider } from "react-dnd"
import { HTML5Backend } from "react-dnd-html5-backend"
import DraggableView from "./component/Draggable";
import LeftDropable from "./component/LeftDropable";
import MIddleDropable from "./component/MiddleDropable";
import DraggableBOXView from "./component/BOX";


const ReactDndView: React.FC = () => {

  const [box1, setBox1] = useState([
    {
      id: String(new Date().valueOf()),
    },
  ])
  const [box2, setBox2] = useState([
  ])
  const [box3, setBox3] = useState([


  ])
  const handleDrop1 = (item) => {
    console.log("代码1", item)
  }
  const handleDrop2 = (item, monitor) => {
    if (!!monitor.didDrop() && !!monitor.getDropResult()) return;
    setBox2((pre) => [...pre, { ...item, id: String(new Date().valueOf()) }])
    console.log("代码2", item, monitor.getItemType())
  }
  const handleDrop3 = (item: any, monitor: any, parentId: any) => {
    if (!!monitor.didDrop() && !!monitor.getDropResult()) return;
    setBox2((prev) => {
      const newItem = {
        id: String(Date.now()),
        type: item.type || 'item',
        sourceContainer: item.containerId
      };
      // 深度优先遍历查找父节点
      const addItemToTree = (nodes: any) => {
        return nodes.map((node: any) => {
          if (node.id === parentId) {
            return {
              ...node,
              children: [...(node.children || []), newItem]
            };
          }

          if (node.children) {
            return {
              ...node,
              children: addItemToTree(node.children)
            };
          }

          return node;
        });
      };
      return addItemToTree(prev);
    })
  }
  const renderTree = (node) => {
    console.log(node,'Node')
    return node.type!=="input" ? <DraggableBOXView
      key={node.id}
      id={node.id}
      containerId={node.containerId || 'BOX'}
      handleDrop={(item, monitor) => handleDrop3(item, monitor, node.id)}
    >
      {node.children?.map(child => renderTree(child))}
    </DraggableBOXView> : <DraggableView key={node.id} id={node.id} containerId="MIddleDropable"></DraggableView>

  };
  return (
    <div className={"w-screen h-screen bg-cyan-300"}>
      <DndProvider backend={HTML5Backend}>
        <div className={'w-full  h-full flex justify-around'}>
          <div className={"w-1/5 pr-1"}>
            <LeftDropable state={'LeftDropable'} handleDrop={handleDrop1}/>
          </div>
          <div className={"w-3/5"}>
            <MIddleDropable state={"MIddleDropable"} handleDrop={handleDrop2}>
              {box2.map((node) => {
                switch (node.type) {
                  case 'input':
                    return <DraggableView key={node.id} id={node.id} containerId="MIddleDropable"></DraggableView>
                  case 'container':
                    return renderTree(node);
                  default:
                    break;
                }
              })}
              {/* { } */}
            </MIddleDropable>
          </div>
          <div className={"w-1/5"}>

          </div>
        </div>
      </DndProvider>
    </div>
  )

}
export default ReactDndView;